<script setup>
import addOreditDialog from './dialog/add-or-edit.vue';

const searchConfig = ref({
  items: [
    {
      key: 'title',
      title: '标题',
    },
    {
      key: 'type',
      title: '类型',
      type: 'select',
      placeholder: '请选择',
    },
    {
      key: 'content',
      title: '内容',
    },
    {
      key: 'isRead',
      title: '读取状态',
      type: 'select',
      placeholder: '请选择',
    },
    {
      key: 'createTime',
      title: '创建时间',
      type: 'daterange',
      startPlaceholder: '请选择',
      endPlaceholder: '请选择',
    },
  ],
  search: () => {},
  reset: () => {},
  params: {},
});
const operateOptions = [
  {
    label: '新增',
    value: '',
    type: 'primary',
    click: () => {
      addHandle();
    },
  },
  {
    label: '删除',
    value: '1',
  },
  {
    label: '提交',
    value: '2',
    click: () => {
      submitHandle();
    },
  },
];

const addOrEditRef = ref(null);
const rowData = ref({});
const editHandle = (v) => {
  console.log('编辑：', v);
  rowData.value = v;
  addOrEditRef.value.open();
};
const addHandle = () => {
  rowData.value = false;
  addOrEditRef.value.open();
};
const addAfterValue = (v) => {
  console.log('emit======》：', v);
};

const submitHandle = () => {
  const submitForm = selectData.value[0];
  console.log('选中数据', submitForm);
};
const columns = ref([
  {
    type: 'selection',
  },
  {
    label: '标题',
    prop: 'title',
  },
  {
    label: '类型',
    prop: 'type',
    options: {
      formatter: () => 'formatter',
    },
  },
  {
    label: '内容',
    prop: 'content',
    slot: 'content',
  },
  {
    label: '读取状态',
    prop: 'isRead',
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: '170px',
  },
  {
    type: 'option',
    minWidth: '86',
    items: [
      {
        text: '编辑',
        icon: 'vc-icon vc-icon-table-check',
        click: (v) => {
          editHandle(v);
        },
      },
      {
        text: '删除',
        icon: 'vc-icon vc-icon-table-check',
        click: () => {},
      },
      {
        text: '字典配置',
        icon: 'vc-icon vc-icon-table-check',
        click: () => {},
      },
      {
        text: '字典配置',
        type: 'option',
        item: [
          {
            text: '编辑',
            click: () => {
            },
          },
          {
            text: '删除',
            click: () => {},
          },
        ],
      },
    ],
  },
]);

const tableData = ref([
  {
    title: '123',
    type: '123',
    content: '1232222222',
    isRead: '123',
    createTime: '123',
  },
  {
    title: '123',
    type: '123',
    content: '1232222222',
    isRead: '123',
    createTime: '123',
  },
]);
const select = (selection, row) => {
  console.log('father', selection, row);
};
const selectData = ref([]);
const selectionChange = (selection) => {
  console.log('handleSelectionChange', selection);
  selectData.value = selection;
};
const tableEvents = {
  selectionChange,
  select,
};
const tableOptions = {
  emptyText: '暂无数据',
  border: false,
  stripe: true,
};

const pagination = {
  total: 100,
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
};

const loadTableData = (pagination) => {
  console.log('loadTableData', pagination);
};
</script>

<style lang="scss"></style>
<template>
  <div class="search-header-wrap ">
    <search-header :searchConfig="searchConfig"></search-header>
  </div>
  <basic-container>
    <div class="table-wrap">
      <basic-table
        :operateOptions="operateOptions"
        :columns="columns"
        :tableOptions="tableOptions"
        :tableEvents="tableEvents"
        :data="tableData"
        :pagination="pagination"
        @loadTableData="loadTableData"
      >
        <template #content>
          <span>自定义插槽内容</span>
        </template>
      </basic-table>
    </div>
  </basic-container>
  <addOreditDialog ref="addOrEditRef" :rowData="rowData" @addAfterValue="addAfterValue"></addOreditDialog>
</template>
<style lang="scss" scoped>
.table-wrap {
  padding: 10px;
}
.search-header-wrap{
  background-color: #fff;
  margin: 10px 10px;
}
</style>
